import React from 'react';

import { Form, Row, Col, Card, Input, Select, Radio, Button } from 'antd';

const { Option } = Select;

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
    }
};

const UserForm = React.forwardRef(({ form, value }) => {
    console.log(value);
    const { getFieldDecorator } = form;
    const prefixSelector = getFieldDecorator('phoneAreaCode', {
        initialValue: '86'
    })(
        <Select style={{ width: 70 }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    const handleSubmit = e => {
        e.preventDefault();
        console.log(33);
        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    return (
        <Card
            title="录入简历"
            headStyle={{ fontWeight: '700' }}
            bordered={false}
            extra={
                <Button type="primary" onClick={handleSubmit}>
                    确定
                </Button>
            }
        >
            <Form {...formItemLayout} className="ant-advanced-search-form" onSubmit={handleSubmit}>
                <Row gutter="16">
                    <Col sm={6}>
                        <Form.Item label="姓名">
                            {getFieldDecorator('talentName', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入姓名'
                                    }
                                ]
                            })(<Input placeholder="请输入姓名" />)}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="性别">
                            {getFieldDecorator('talentSex', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入性别'
                                    }
                                ]
                            })(
                                <Radio.Group>
                                    <Radio value="man">男</Radio>
                                    <Radio value="woman">女</Radio>
                                </Radio.Group>
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="应聘岗位">
                            {getFieldDecorator('dutyCode')(
                                <Select placeholder="应聘岗位">
                                    <Option value="red">前端</Option>
                                    <Option value="green">后端</Option>
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="需求部门">
                            {getFieldDecorator('departmentCode')(
                                <Select placeholder="需求部门">
                                    <Option value="red">研发部</Option>
                                    <Option value="green">行政部</Option>
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="学历">
                            {getFieldDecorator('talentDegree')(
                                <Select placeholder="学历">
                                    <Option value="red">研究生</Option>
                                    <Option value="green">专科</Option>
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="工作时长">
                            {getFieldDecorator('talentWorkYear')(
                                <Select placeholder="工作时长">
                                    <Option value="red">1年</Option>
                                    <Option value="green">3年</Option>
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="手机号">
                            {getFieldDecorator('talentPhone', {
                                rules: [{ required: true, message: '请输入手机号!' }]
                            })(
                                <Input
                                    placeholder="请输入手机号"
                                    addonBefore={prefixSelector}
                                    style={{ width: '100%' }}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="个人邮箱">
                            {getFieldDecorator('talentEmail', {
                                rules: [
                                    {
                                        type: 'email',
                                        message: '非合法邮箱'
                                    },
                                    {
                                        required: true,
                                        message: '请输入邮箱'
                                    }
                                ]
                            })(<Input placeholder="请输入邮箱" />)}
                        </Form.Item>
                    </Col>
                    <Col sm={6}>
                        <Form.Item label="现居地">
                            {getFieldDecorator('address', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入现居地'
                                    }
                                ]
                            })(<Input placeholder="请输入现居地" />)}
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
});

export default Form.create({})(UserForm);
